<template>
	<view class="login-wrap">
		<view class="topVue">
			<view class="status"></view>
			<view class="navVue">
				<view style="width: 150rpx;">
					<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun">
					</image>
				</view>
				<view class="nav-title">登录</view>
				<view class="changeLanBtn" @click="toLang()"> Language</view>
			</view>
		</view>
		<view class="place"></view>


		<view class="logo-box">
			<image src="../../static/logo1.png" style="border-radius: 50%;" class="logo"></image>
		</view>

		<view class="form-box">
			<view class="inpVue">
				<input type="text" placeholder="请输入手机号" v-model="form.phone"/>
			</view>
			<view class="inpVue">
				<input type="password" :placeholder="$t('请输入登录密码')" v-model="form.pwd"/>
			</view>

			<!-- <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<u-form-item label="" prop="phone" borderBottom ref="item1">
					<u--input :placeholder="$t('请输入手机号')" v-model="form.phone" border="none"></u--input>
				</u-form-item>


				<u-form-item label="请输入登录密码" prop="pwd" borderBottom ref="item1">
					<u--input :placeholder="$t('请输入登录密码')" v-model="form.pwd" border="none" type="password"></u--input>
				</u-form-item>
			</u--form> -->
			<view class="calcpwd-box">
				<view class="left" @click="checked=!checked">
	
					<image src="../../static/imgs/checked.png" style="width: 38rpx; height: 38rpx;" v-if="checked" ></image>
					<image src="../../static/imgs/check.png" style="width: 38rpx; height: 38rpx;" v-else></image>
					<text style="color: #333; padding-left: 10rpx;">记住密码</text>
				</view>
				<view class="right" @click="toForgetPassword">
					{{ $t("忘记密码") }}
				</view>
			</view>
			<view class="btn-box">
				<u-button @click="submit" class="submit-btn">{{ $t("登录") }}</u-button>
			</view>
			<view class="register-wrap" @click="toRegister"> {{ $t("注册") }} </view>
		</view>
		<u-picker :show="show" :columns="list" itemHeight="80" @confirm="confirm" @cancel="cancel"
			:cancelText="$t('取消')" :confirmText="$t('确定')"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					phone: "",

					pwd: "",
				},
				checked: false,
				show: false,
				// rules: {
				//   phone: {
				//     required: true,
				//     message: this.$t("请输入手机号"),
				//     trigger: ["blur", "change"],
				//   },
				//   pwd: {
				//     required: true,
				//     message: this.$t("请输入登录密码"),
				//     trigger: ["blur", "change"],
				//   },
				// },
				checkboxValue: [],
				langList: ["CN", "EN", "JA", "KO"],
				list: [
					["中文", "English", "日本語", "한국어"]
				],
			};
		},
		computed: {
			rules() {
				return {
					phone: {
						required: true,
						message: this.$t("请输入手机号"),
						trigger: ["blur", "change"],
					},
					pwd: {
						required: true,
						message: this.$t("请输入登录密码"),
						trigger: ["blur", "change"],
					},
				};
			},
			// list() {
			// 	return [
			// 		[this.$t("中文"), this.$t("英语"), this.$t("日语"), this.$t("韩语")],
			// 	];
			// },
		},
		methods: {
			
			submit() {
				// this.$refs.uForm
				// 	.validate()
				// 	.then((res) => {
					console.log(this.checked);
						this.$http
							.post(
								`/front/login?name=${this.form.phone}&password=${this.form.pwd}`
							)
							.then((res) => {
								console.log(res, this.checked);

								if (this.checked) {
									let userInfo = {
										name: this.form.phone,
										pwd: this.form.pwd,
									};
									uni.setStorageSync("userInfo", userInfo);
								} else {
									uni.removeStorageSync("userInfo");
								}
								console.log("checkboxValue", this.checkboxValue);
								if (res.code === 0) {
									// 存token，跳转首页
									let token = res.obj.token;
									uni.setStorageSync("token", token);
									uni.switchTab({
										url: "/pages/index/index",
									});
									uni.$u.toast(this.$t("登录成功"));
								}
							});
					// })
					// .catch((errors) => {
					// 	uni.$u.toast(this.$t("校验失败"));
					// });
			},
			toForgetPassword() {
				uni.navigateTo({
					url: "/pages/login/forgetPassword",
				});
			},
			checkboxChange() {

			},
			toRegister() {
				uni.navigateTo({
					url: "/pages/login/register",
				});
			},
			backFun() {
				uni.navigateBack({
					delta: 1
				})
			},
			toLang() {
				this.show = true;
			},
			confirm(e) {
				console.log(e, "wwwww");
				if (e) {
					this.$i18n.locale = this.langList[e.indexs];
					uni.setStorageSync("lang", this.langList[e.indexs]);
				}
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
		},

		onLoad() {
			let userInfo = uni.getStorageSync("userInfo");
			if (userInfo) {
				this.form.phone = userInfo.name;
				this.form.pwd = userInfo.pwd;
				this.checkboxValue.push(this.$t("记住账号密码"));
			}
		},
	};
</script>

<style lang="scss">
	.login-wrap {
		width: 100%;
		height: 100vh;
		background: url("../../static/imgs/bg.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		position: fixed;

		.topVue {
			width: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 99;

			.status {
				width: 100%;
				height: var(--status-bar-height);
			}

			.navVue {
				width: 100%;
				height: 92rpx;
				background: linear-gradient(to right, #FFFBFF, #FFE7F4);
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 30rpx;

				.nav-title {
					width: 420rpx;
					height: 92rpx;
					font-size: 36rpx;
					color: #04094C;
					text-align: center;
					line-height: 92rpx;
				}

				.changeLanBtn {
					width: 150rpx;
					color: #333;
				}
			}
		}

		.place {
			height: calc(var(--status-bar-height) + 92rpx);
		}


		.logo-box {
			width: 200rpx;
			height: 200rpx;
			color: #333;
			padding-top: 100rpx;
			margin: 0 auto;
			margin-bottom: 149rpx;

			.logo {
				width: 100%;
				height: 100%;
			}
		}

		.form-box {
			width: 100%;
			// padding: 0 75rpx;
			box-sizing: border-box;
			.inpVue {
				width: 690rpx;
				height: 88rpx;
				background: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				margin: 30rpx auto 0;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
			}
			
			
			.btn-box {
				width: 100%;
				height: 90rpx;
				box-sizing: border-box;
				padding: 0 25rpx;
				margin-top: 82rpx;
			}

			.u-button {
				width: 100%;
				height: 100%;
				background: #D55B94;
				border-radius: 20rpx;
				color: $uni-bg-color;
				font-size: $uni-font-size-30;
				font-family: PingFang SC;
				font-weight: 400;
				border: none;
			}

			.calcpwd-box {
				width: 100%;
				height: auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 300;
				box-sizing: border-box;
				padding: 0 18rpx;
				margin-top: 30rpx;
				.left {
					height: 100%;
					color: #333;
display: flex;
align-items: center;
				}

				.right {
					color: #333;
				}
			}

			.u-form-item {
				width: 100%;
				height: 90rpx;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;

				/deep/ .u-line {
					display: none;
				}

				/deep/ .u-input {
					background: #fff;
				}

				/deep/ .u-form-item__body__left__content__label {
					width: 100%;
				}

				/deep/ .u-form-item__body,
				/deep/ .u-form-item__body__right__content__slot,
				/deep/ .u-input,
				/deep/ .u-input__content,
				/deep/ .u-input__content__field-wrapper,
				/deep/ .u-input__content__field-wrapper__field,
				/deep/ .uni-input-input {
					height: 100%;
					padding: 0;
				}

				/deep/ .uni-input-input {
					padding: 0 25rpx;
					box-sizing: border-box;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: $uni-text-color-grey;
					background: #fff;
					border-radius: 20rpx;
				}

				/deep/ .uni-input-placeholder {
					// padding: 0 27rpx;
					color: #999 !important;
				}
			}

			/deep/ .u-checkbox__icon-wrap {
				width: 30rpx !important;
				height: 30rpx !important;
				background-color: transparent !important;
				border-color: #999 !important;
			}
		}

		.register-wrap {
			widows: 100%;
			height: 40px;
			color: #333;
			text-align: center;
			margin-top: 20px;
		}
	}
</style>